<template>
  <div :class="['left-container', { fixed: isFixed && isShowMenu }]">
    <div class="menu-list">
      <AppstoreOutlined
        :class="['menu-btn', { active: isShowMenu }]"
        @click="showMenu"
      />
    </div>
    <div
      :class="['menu', { fixed: isFixed }]"
      v-show="isShowMenu"
      @dragleave="dragleave"
    >
      <div class="menuTitle">
        <span class="Tleft">组件库</span>
        <span class="Tright">
          <CloseOutlined style="font-size: 18px" @click="closeMenu" />
          <PushpinOutlined style="font-size: 18px" @click="fixedMemu" />
        </span>
      </div>
      <div class="searchBox">
        <Input v-model:value="searchKey" placeholder="搜索组件">
          <template #suffix>
            <SearchOutlined />
          </template>
        </Input>
      </div>
      <div class="eleSlot"><span>基础组件</span></div>
      <div class="baseEleBox">
        <div
          v-for="item in searchRes?.[0] || []"
          class="comBox"
          draggable="true"
          @dragstart="dragStart"
          :key="item.name"
          :id="item.comName"
        >
          <img
            class="img-show"
            draggable="false"
            :src="require('@/assets/' + item.imagUrl)"
            alt="图片失踪"
          />
          <div class="com-name">{{ item.name }}</div>
        </div>
      </div>
      <div class="eleSlot"><span>复合组件</span></div>
      <div class="baseEleBox">
        <div
          v-for="item in searchRes?.[1] || []"
          draggable="true"
          @dragstart="dragStart"
          :key="item.name"
          class="comBox"
          :id="item.comName"
        >
          <img
            class="img-show"
            draggable="false"
            :src="require('@/assets/' + item.imagUrl)"
            alt="图片失踪"
          />
          <div class="com-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useStore } from "vuex";
import {
  AppstoreOutlined,
  CloseOutlined,
  PushpinOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
import { Input } from "ant-design-vue";
const isShowMenu = ref(false);
const searchRes = ref([]);
const searchKey = ref("");
const isFixed = ref(false);
let comList = [
  [
    { id: 0, comName: "BtnCom", imagUrl: "icon_btn.png", name: "按钮" },
    { id: 1, comName: "TextCom", imagUrl: "icon_text.png", name: "文本" },
    {
      id: 2,
      comName: "VideoCom",
      imagUrl: "icon_video.png",
      name: "视频",
    },
    {
      id: 3,
      comName: "ImageCom",
      imagUrl: "icon_image.png",
      name: "图片",
    },
    { id: 4, comName: "LinkCom", imagUrl: "icon_link.png", name: "链接" },
  ],
  [],
];
const store = useStore();
const dragStart = (event) => {
  const {
    target: { id },
    offsetY,
    offsetX,
  } = event;
  store.commit("setDragedComInfo", { id, offsetY, offsetX });
};

const showMenu = () => {
  isShowMenu.value = !isShowMenu.value;
};
const closeMenu = () => {
  isFixed.value = false;
  isShowMenu.value = false;
};
const fixedMemu = () => {
  isFixed.value = !isFixed.value;
};
const dragleave = () => {
  if (!isFixed.value) {
    isShowMenu.value = false;
  }
};
const searchCom = (val) => {
  searchRes.value = comList.map((el) => {
    return el.filter((item) => item.name.includes(val));
  });
};

watch(
  searchKey,
  (val) => {
    searchCom(val);
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
.left-container {
  position: relative;
  margin-right: 2px;
  width: 40px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  /* 禁用文字选中 */
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  z-index: 10;
  flex-shrink: 0;
  transition: width 0.4s;
  &.fixed {
    width: 340px;
  }
  .menu-list {
    position: absolute;
    top: 0;
    left: 0;
    .menu-btn {
      cursor: pointer;
      margin: 16px 0;
      padding: 0 8px;
      font-size: 24px;
    }
  }

  .menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 41px;
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(237, 237, 237, 0.6);
    box-shadow: 4px 6px 6px 0 rgba(49, 54, 63, 0.185);
    z-index: 99;
    &.fixed {
      box-shadow: none;
      left: 40px;
    }
    .menuTitle {
      height: 48px;
      width: 100%;
      .Tleft {
        float: left;
        margin-left: 15px;
        margin-top: 16px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 16px;
        text-align: left;
        vertical-align: middle;
      }
      .Tright {
        float: right;
        span {
          /*8.18hp修改更改图标大小 (以下)*/
          float: right;
          margin-top: 9px;
          margin-right: 9px;
          height: 20px;
          width: 20px;
        }
      }
    }
    .baseEleBox {
      display: flex;
      flex-wrap: wrap;
      .comBox {
        cursor: pointer;
        height: 113px;
        width: calc(1 / 3 * 100%);
        border: solid rgba(237, 237, 237, 0.6);
        border-width: 0px 1px 1px 0px;
        box-sizing: border-box;
        transition: box-shadow 0.3s;
        &:hover {
          box-shadow: 0px 7px 16px 1px rgba(0, 0, 0, 0.2);
        }
        .img-show {
          width: 30px;
          height: 30px;
          margin-top: 20px;
        }

        .com-name {
          margin-top: 20px;
          font-size: 12px;
        }
      }
    }
  }
}

.searchBox {
  width: 100%;
  padding: 16px;
}

.eleSlot {
  height: 42px;
  width: 100%;
  border: solid rgba(237, 237, 237, 0.6);
  border-width: 1px 0;
  span {
    float: left;
    padding-left: 15px;
    font-size: 12px;
    line-height: 42px;
    text-align: left;
    font-weight: 700;
  }
}
</style>
